<template>
  <div class="equipmentManagement h100">
    <div class="PageContent">
      <div class="tablelist"  v-if="listShow">
        <el-row style="text-align: left;line-height: 4em;" class="fileSearch">
          <el-button type="primary" plain v-if="btnRight.btnEquManInit" @click="initEquipment()">设备初始化</el-button>
          <el-button type="primary" v-if="btnRight.btnEquManAdd" @click="addEquipment()">添加</el-button>
          <el-button type="primary" v-if="btnRight.btnEquManEdit" @click="modifyEquipment()">修改</el-button>
          <el-button type="danger" v-if="btnRight.btnEquManDelete"  @click="removeEquipment()">删除</el-button>
          <el-button type="primary" plain v-if="btnRight.btnEquManReview" @click="previewEquipment()">可视化布局预览</el-button>
        </el-row>
        <el-table
          ref="equipmentTable"
          :data="tableEquipmentData" :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          border
          stripe
          @row-click="handleRowClick"
          @select="select" @selection-change="selectAll"
          :height="tableHeight"
          >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            property="equipmentCode"
            label="编号"
            align = 'center'
            width="150">
          </el-table-column>
          <el-table-column
            property="equipmentType"
            label="冷藏柜类型"
            align = 'center'
            width="150">
          </el-table-column>
          <el-table-column
            property="columnNo"
            label="所在列"
            align = 'center'
            width="100">
          </el-table-column>
          <el-table-column
            property="rowNo"
            label="所在行"
            align = 'center'
            width="100">
          </el-table-column>
          <el-table-column
            label="状态"
            align = 'center'
            width="120">
            <template slot-scope="{row,$index}">
              <p v-if="row.disableState==0">
                <span>有效可用</span>
              </p>
              <p v-else-if="row.disableState==1">
                <span>无效禁用</span>
              </p>
              <p v-else-if="row.disableState==3">
                <span>维修</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column
            align = 'center'
            label="规则说明">
            <template slot-scope="{row,$index}" >
              <div v-if="row.ruleItems" v-for="(item, index) in row.ruleItems" :key="index">
                <p style="width: 100%;">
                  <span>用途:【{{ item.purpose }}】</span>，
                  <span>单价:【{{ item.itemPrice }}】</span>，
                  <span>{{ item.ruleType }}</span>，
                  <span>{{ item.ruleDescribe }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            property="sort"
            align = 'center'
            label="排序"
            width="120">
          </el-table-column>
        </el-table>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </div>
      <div class="preview" v-if="previewShow">
        <el-row style="text-align: left;line-height: 3em;font-size:1em;">冷藏柜管理-可视化布局预览</el-row>
        <el-row style="text-align: left;line-height: 4em;">
          <el-button type="primary" plain v-if="btnRight.btnEquManList"  @click="listShowChange()">列表页</el-button>
          <el-tag effect="plain">空闲</el-tag>
          <el-tag type="danger" effect="dark">维修</el-tag>
          <el-tag type="warning" effect="dark">占用</el-tag>
        </el-row>
        <el-row style="overflow-x: scroll">
          <div class="wrapper"  v-for="(item,m) in previewList" :style="{'margin-bottom':(m+1)%3==0 ?'50px':'0px'}" :key="m">
            <div class="box-card" v-for="(n,index) in item">
              <div class="item"  :class="{free:n.disableState==0?true:false,repair:n.disableState==3?true:false,sale:n.disableState==1?true:false,}">
                <h2 v-if="n.equipmentCode">【编号：{{n.equipmentCode}}】</h2>
                <h2 v-if="n.equipmentType">【类型{{n.equipmentType}}】</h2>
                <h2 v-if="n.disableState==0">【状态：有效可用】</h2>
                <h2 v-else-if="n.disableState==1">【状态：无效禁用】</h2>
                <h2 v-else-if="n.disableState==3">【状态：维修】</h2>
              </div>
            </div>
          </div>
        </el-row>
      </div>
      <div class="import" v-if="importShow">
        <el-row style="text-align: left;line-height: 3em;font-size:1em;">冷藏柜管理-可视化布局预览</el-row>
        <el-row style="text-align: left;line-height: 4em;">
          <el-button type="primary" plain v-if="btnRight.btnEquManList" @click="listShowChange()">列表页</el-button>
          <!--<el-button type="primary" @click="deleteAll()">删除所有</el-button>-->
          <el-button type="primary" v-if="btnRight.btnEquManImport"  @click="dialogVisibleimport=true">导入冷柜数据</el-button>
          <el-tag effect="plain">空闲</el-tag>
          <el-tag type="danger" effect="dark">维修</el-tag>
          <el-tag type="warning" effect="dark">占用</el-tag>
        </el-row>
        <el-row  style="overflow-x: scroll">
          <div class="wrapper"  v-for="(item,m) in importList" :style="{'margin-bottom':(m+1)%3==0 ?'50px':'0px'}" :key="m">
            <div class="box-card" v-for="(n,index) in item">
              <div class="item"  :class="{free:n.disableState==0?true:false,repair:n.disableState==3?true:false,sale:n.disableState==1?true:false,}">
                <h2 v-if="n.equipmentCode">【编号：{{n.equipmentCode}}】</h2>
                <h2 v-if="n.equipmentType">【类型{{n.equipmentType}}】</h2>
                <h2 v-if="n.disableState==0">【状态：有效可用】</h2>
                <h2 v-else-if="n.disableState==1">【状态：无效禁用】</h2>
                <h2 v-else-if="n.disableState==3">【状态：维修】</h2>
              </div>
            </div>
          </div>
        </el-row>
      </div>
    </div>
    <el-dialog title="上传文件" :visible.sync="dialogVisibleimport" width="500px" v-dialogDrag   border >
      <!--<el-upload-->
      <!--class="upload-demo"-->
      <!--:limit="1"-->
      <!--:file-list="fileList">-->
      <!--<el-button size="small" type="primary" @click="importData()">点击上传</el-button>-->
      <!--</el-upload>-->
      <el-row>
        <input type="file" class="file" ref="filElem"  @change="getFile">
        <el-button size="small" type="primary" @click="selectData()">选择文件</el-button>{{fileName}}
      </el-row>
      <el-row style="margin-top:20px;">
        <el-button size="small" type="primary" @click="importData()">点击上传</el-button>
      </el-row>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button   @click="dialogVisibleimport = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="单柜信息维护" :visible.sync="dialogVisible" width="700px" v-dialogDrag   border >
      <el-form :model="saveEquipmentData.equipment" class="saveform" :rules="rules" ref="equipmentdialog" :inline="true" label-width="120px" :disabled="saveFlag">
        <el-row :gutter="5">

          <el-form-item label="格位编号:" prop="equipmentCode">
            <el-input v-model="saveEquipmentData.equipment.equipmentCode" maxlength="50"></el-input>
          </el-form-item>

          <el-form-item label="格位类型:" prop="equipmentTypeCode">
            <el-select v-model="saveEquipmentData.equipment.equipmentTypeCode" @change="TypeChange(saveEquipmentData.equipment.equipmentTypeCode)"  placeholder="请选择" >
              <el-option
                v-for="item in saveEquipmentData.dicts.equipment_type	"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState?true:false"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5" class="saveform" >
          <el-form-item label="收费规则:" >
            <div v-if="saveEquipmentData.ruleItems"  class="ruleItem">
              <p class="content" v-for="(item, index) in showRule" :key="index">
                <span>用途:【{{ item.purpose }}】</span>，
                <span>单价:【{{ item.itemPrice }}】</span>，
                <span>{{ item.ruleType }}</span>，
                <span>{{ item.ruleDescribe }}</span>
              </p>
            </div>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="所在列:" prop="columnNo">
            <el-input  onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" v-model="saveEquipmentData.equipment.columnNo" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="所在行:" prop="rowNo">
            <el-input  onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" v-model="saveEquipmentData.equipment.rowNo" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="状态:" prop="disableState">
            <el-select v-model="saveEquipmentData.equipment.disableState" onkeydown="return (event.keyCode!=8)" placeholder="请选择" >
              <el-option
                v-for="item in disableState"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="描述:">
            <el-input type="textarea" style="width:520px;" v-model="saveEquipmentData.equipment.equipmentDescribe"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input type="textarea"  style="width:520px;" v-model="saveEquipmentData.equipment.remark"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:" prop="sort">
            <el-input onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"  v-model="saveEquipmentData.equipment.sort" maxlength="11" style="width:520px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button type="primary" v-if="btnRight.btnEquManSave" @click="saveEquipment()" :disabled="saveFlag">保存</el-button>
        <el-button type="primary" plain v-if="btnRight.btnEquManCancel" @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API from "@/api/systemApplication"
  import axios from 'axios'
  export default {
    name: "equipmentManagement",
    data() {
      const validatenull = (rule, value, callback) => {
        if (!value || value.length ==0) {
          callback(new Error('不能为空'))
        }else {
          callback()
        }
      }
      return {
        rules: {
          equipmentCode: [
            {required: true, message: '请填写', trigger: 'blur'},
          ],
          equipmentTypeCode: [
            {required: true, message: '请选择', trigger: 'change',validator: validatenull},
          ],
          columnNo: [
            {required: true, message: '请填写', trigger: 'blur',validator: validatenull},
          ],
          rowNo: [
            {required: true, message: '请填写', trigger: 'blur',validator: validatenull},
          ],
          disableState: [
            {required: true, message: '请选择', trigger: 'change'},
          ],
        },
        tableSelection:[],
        tableHeight:0,
        //**礼厅数据**//
        tableEquipmentData:[],
        showRule:[], //根据车辆类型选择显示相应规则
        purpose:[],
        saveEquipmentData:{
          "equipment": {
            "id": 0,
            "equipmentCode": "string",
            "equipmentTypeCode": 0,
            "columnNo": 0,
            "rowNo": 0,
            "disableState": 0,
            "equipmentDescribe": "string",
            "remark": "string",
            "sort": 0,
            "version": 0
          },
          "dicts": {
            "cold_storage_equipment": []
          },
          "ruleItems": []
        },
        previewList:{},              //加载所有冷藏柜信息，为可视化界面提供显示数据
        importList:{},  //导入execl成功后加载信息
        listShow:true,      //列表页
        previewShow:false,   //可视化布局预览
        importShow:false,   //数据初始化
        visible: false,  //确认删除提示
        disableState:[
          {label:"有效可用",value:0},{label:"无效禁用",value:1},{label:"维修",value:3}
        ],
        dialogVisible:false,    //礼厅对话框
        onpresscTime:0,  //  阻止短时间内连续点击
        saveFlag:false,         //礼厅保存标志
        modify:false,               //修改标
        //total总页数，pageSize:每页显示数量，currentPage：当前页
        pager:{
          "pageSize": 20,
          "total": 1,
          "currentPage": 1
        },
        showRule:[], //显示规则
        fileList:[],      //上传的文件列表
        dialogVisibleimport:false,
        btnRight: {
          btnEquManInit: true, //设备初始化
          btnEquManAdd: true,//添加
          btnEquManEdit: true,//修改
          btnEquManDelete: true,//删除
          btnEquManReview: true,//可视化布局预览
          btnEquManList: true,//冷柜管理列表页
          btnEquManImport: true,//导入冷柜数据
          btnEquManSave: true,//保存
          btnEquManCancel: true,//取消
        },
        fileName:""
      }
    },
    mounted(){
      this.loadEquipmentListData();
      //载入按钮
      this.btnRight = this.$route.meta.buttons;//mounted(){}
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      }
      var that=this
      window.onresize=function() {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight =dom - search - 110
      }
    },
    //注销window.onresize事件
    destroyed(){
      window.onresize = null;
    },
    updated(){
      this.$nextTick(()=>{
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight =dom - search - 120
      })
    },
    methods:{
      //全选
      selectAll(val) {
        this.multipleSelection = val;
      },
      //点击行触发，选中或不选中复选框
      handleRowClick(row, column, event) {
        if (this.tableSelection.length>0){
          this.$refs.equipmentTable.toggleRowSelection(this.tableSelection[0],false);
        }
        this.$refs.equipmentTable.toggleRowSelection(row);
        this.tableSelection = [row]
      },
      /*select(selection, row) {
        // 选择项大于1时
        if (selection.length > 1) {
          let del_row = selection.shift();
          // console.log('把数组的第一个元素从其中删除后', selection);
          this.$refs.equipmentTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        }
        this.tableSelection = selection
      },*/
      /*selectAll(selection) {
        if (selection.length >1) {
          selection.length = 1;
        }
        this.tableSelection = selection
      },*/
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pagesize = size;
        alert(pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.pager.currentPage = currentPage;
        this.loadEquipmentListData()  //点击第几页加载数据
      },
      /**********************方法**********************/
      //显示列表页
      listShowChange(){
        //列表页显示其余不显示
        this.listShow = true;
        this.importShow = false;
        this.previewShow = false;
      },
      //删除所有冷柜
      deleteAll(){

      },
      getFile(){
        var that = this;
        const inputFile = this.$refs.filElem.files[0];
        if(inputFile){
          that.fileName = inputFile.name
        } else {
          return;
        }
      },
      selectData(){
        this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
      },


      //导入冷柜数据
      importData(){
        if (!document.querySelector('input[type=file]').files[0]){
          this.$message("请选择文件")
          return
        }


        var formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
        formData.append('importExcelFile', document.querySelector('input[type=file]').files[0])
        // debugger
        axios({
          method: "post",
          baseURL: "api",
          withCredentials: true,
          timeout: 5000 ,
          url: "/admin/equipment/import-equipment-with-excel",
          headers: {
            token:this.$store.getters.token
          },
          data: formData,
        }).then(res => {
          if (res.code==1){
            if (res.data) {
              let { message }=res.data
              if ( message ){
                this.$message(message)
                this.loadEquipmentPreviewListData().then(res=>{
                  this.importList = res;
                  this.dialogVisibleimport = false
                })
              }
            }
          } else{
            if (res.data) {
              let {message} = res.data
              this.$message(message)
            }else {
              this.$message("导入异常")
            }
          }

        });
      },
      //设备初始化
      initEquipment(){
        this.listShow = false
        this.importShow = true
        this.previewShow = false;
      },
      //table中类型添加
      addEquipment(){
        this.saveEquipmentData.equipment = {
          "id": 0,
          "equipmentCode": "",
          "equipmentTypeCode": "",
          "columnNo": "",
          "rowNo": "",
          "disableState": 0,
          "equipmentDescribe": "",
          "remark": "",
          "sort": 0,
          "version": 0
        }
        let postData={
          "id": null,
          "dictTypeCodes": [
            "equipment_type"
          ]
        }
        API['loadEquipmentWithId'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.dicts){
            this.saveEquipmentData.dicts = data.dicts;
          }
          if (data.ruleItems){
            this.saveEquipmentData.ruleItems = data.ruleItems;
          }

          this.dialogVisible=true
        }).catch(error => {
          this.$message(error)
        })
        this.dialogVisible = true
      },
      //table中类型修改
      modifyEquipment(){
        this.modify = true;
        let data = this.tableSelection
        if (data.length==0) {
          this.$message("未选中")
          return
        }
        let postData={
          "id": data[0].id,
          "dictTypeCodes": [
            "equipment_type"
          ]
        }
        API['loadEquipmentWithId'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.equipment){
            this.saveEquipmentData.equipment = data.equipment;
          }
          if (data.dicts){
            this.saveEquipmentData.dicts = data.dicts;
          }
          if (data.ruleItems){
            this.saveEquipmentData.ruleItems = data.ruleItems;
          }
          this.showRule = []
          if (this.saveEquipmentData.equipment.equipmentTypeCode) {
            this.saveEquipmentData.ruleItems.forEach(item=>{
              if (item.dataCode == this.saveEquipmentData.equipment.equipmentTypeCode) {
                this.showRule.push(item)
              }
            })
          }
          this.dialogVisible=true
        }).catch(error => {
          this.$message(error)
        })
      },
      //table中服务物品类型删除
      removeEquipment(){
        let data = this.tableSelection
        if (data.length==0) {
          this.$message("未选中")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData=[
            {
              "id": data[0].id,
              "version": data[0].version
            }
          ]
          API['deleteEquipmentWithId'](postData).then(response=>{
            const { message }=response;
            this.$message(message)
            this.tableSelection =[]
            this.loadEquipmentListData();
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      //加载布局
      loadEquipmentPreviewListData(){
        return new Promise(resolve => {
          API['loadEquipmentPreviewList']().then(response => {
            const {data} = response;
            if (!data) {
              this.$message('数据读取失败')
              return
            }
            let obj = {};
            data.forEach(item => {
              if (!obj["" + item.rowNo]) {
                obj["" + item.rowNo] = []
                obj["" + item.rowNo].push(item)
              } else {
                obj["" + item.rowNo].push(item)
              }
            })
            for (let n in obj) {
              var sorted = obj[n].sort(function (x, y) {
                return x.columnNo - y.columnNo;
              });
              obj[n] = sorted
            }
            resolve(obj)
          }).catch(error => {
            this.$message(error)
          })
        })
      },
      //可视化布局预览
      previewEquipment(){
        this.listShow = false
        this.previewShow = true
        this.importShow = false;
        this.loadEquipmentPreviewListData().then(res=>{
          this.previewList = res;
        })
      },
      //加载列表
      loadEquipmentListData(){
        let postData={
          "pageSize": this.pager.pageSize,
          "currentPage": this.pager.currentPage,
          "exportExcelFlag": 0, //导出Excel标记，当标记为1时表示当前查询结果需要导出Excel
          "orderField": "equipmentCode",//排序字段，指定当前查询按哪个字段进行排序，字段名和接口返回数据中字段名保持一致，例如：equipmentCode
          "orderType": "asc"  //排序顺序，指定当前查询按升序还是降序排序，升序时传asc，降序时传desc
        }
        API['loadEquipmentList'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          this.tableEquipmentData = data.list
          this.pager = data.pager

          this.showRule = []
          if (this.saveEquipmentData.equipment.equipmentTypeCode) {
            this.saveEquipmentData.ruleItems.forEach(item=>{
              if (item.dataCode == this.saveEquipmentData.equipment.equipmentTypeCode) {
                this.showRule.push(item)
              }
            })
          }
        }).catch(error => {
          this.$message(error)
        })
      },
      //类型改变后加载规则
      TypeChange(id){
        this.showRule = []
        if (id) {
          this.saveEquipmentData.ruleItems.forEach(item=>{
            if (item.dataCode == id) {
              this.showRule.push(item)
            }
          })
        }
      },
      limit(event) {
        // debugger
        if (event.length > 4) {
          event = event.substr(0, 4)
        }

        event = event.replace(/[^\d]/g, '');

      },
      //保存信息
      saveEquipment(){
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          console.log(Date.now())
        }else{
          return
        }
        this.$refs.equipmentdialog.validate(valid=>{
          if (valid) {
            this.saveFlag = true
            let postData=this.saveEquipmentData.equipment
            API['saveEquipment'](postData).then(response=>{
              const { message }=response;
              this.$message(message)
              this.loadEquipmentListData()
              this.dialogVisible=false
              this.saveFlag = false;
            }).catch(error => {
              this.$message(error)
              this.saveFlag = false;
            })
          }
        })

      },//验证整数
      onlyColumnNumber(){
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveEquipmentData.equipment.columnNo;
        obj=Number.parseInt(obj);
        this.saveEquipmentData.equipment.columnNo=obj;
      },//验证整数
      onlyRowNumber(){
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveEquipmentData.equipment.rowNo;
        obj=Number.parseInt(obj);
        this.saveEquipmentData.equipment.rowNo=obj;
      },//验证整数
      onlySortNumber(){
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveEquipmentData.equipment.sort;
        obj=Number.parseInt(obj);
        this.saveEquipmentData.equipment.sort=obj;
      }
      /**********************方法**********************/

    },
    watch:{
      "dialogVisible"(){
        if (this.dialogVisible == false) {
          this.showRule = []
          this.$nextTick(()=>{
            this.$refs.equipmentdialog.resetFields();
          })
        }
      }
    }
  }
</script>

<style scoped>
  .wrapper{
    display: flex;
    flex-wrap: nowrap;
    margin:5px 0px;
    justify-content: space-between;
  }
  .box-card {
    flex:0 0 200px;
    display: inline-block;
    box-shadow:  0 2px 12px 0 rgba(0,0,0,.1);;
    margin-bottom: 0px;
    margin-right: 30px;
  }
  .item {
    font-size: 16px;
    font-weight: 400;
    height: 90px;
    line-height: 30px;
    text-align: left;
    padding: 0 1em;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);;
    border:1px solid #e9e9e9;
  }
  .item:hover{
    cursor: pointer;
  }
  .item:last-child{
    margin-bottom: 0px;
  }
  .item.sale{
    background-color: #FF6040;
  }
  .item.free {
    background: white;
  }
  .item.repair {
    background: yellow;
  }
  .ruleItem{
    width: 532px;
    max-height: 6em;
    overflow-y: auto;
    line-height: 1.5em;
  }
  .ruleItem .content{
    width: 100%;
    padding-top:10px;
  }
  input[type=file] {
    display: none;
  }
</style>
